<template>
	<view class="hide-border" style="background: #F6F8FB;height: 100vh;">
		<!-- <fa-navbar title="盘点报告" background="#1e5fee" titleColor="#FFF" backIconColor="#FFF"></fa-navbar>-->
		<!-- 导航栏 -->
		<u-navbar :background="{background: '#1e5fee'}" title-color="#FFF" back-icon-color="#FFF" title-size="36" title="盘点报告">
			<view slot="right" @click="toPage('/pages/report/reportHistory')"><text style="padding: 0 20rpx;width: 56px;
																	height: 20px;
																	font-size: 14px;
																	font-family: PingFangSC-Regular, PingFang SC;
																	font-weight: 400;
																	color: #FFF;
																	line-height: 20px;">盘点历史</text></view>
		</u-navbar>
		<!-- 数据信息 -->
		<view class="numeric-info-wrap">
			<u-row>
				<u-col offset="0.75" span="5" class="numeric-item" style="background: linear-gradient(45deg, #43CD61 0%, #23D38E 100%);" @click="toChecklist('normal')">
					<u-row style="margin-bottom: 10rpx;">
						<u-col span="6"><text>总资产数</text></u-col>
						<u-col span="5" style="text-align: right;"><text class="number">{{taskReport.TotalNum}}<text class="unit">件</text></text></u-col>
					</u-row>
					<u-row>
						<u-col span="6"><text>盘点数</text></u-col>
						<u-col span="5" style="text-align: right;"><text class="number">{{taskReport.RealNum}}<text class="unit">件</text></text></u-col>
					</u-row>
					<image class="img" src="../../static/images/icon_see1.svg"></image>
				</u-col>
				<u-col offset="0.75" span="5" class="numeric-item" style="background: linear-gradient(227deg, #4ADDD6 0%, #1DC2B4 100%);">
					<u-row style="margin-bottom: 10rpx;" @click="toChecklist('increase')">
						<u-col span="6"><text>盘盈数</text></u-col>
						<u-col span="5" style="text-align: right;"><text class="number">+{{taskReport.IncreaseNum}}<text class="unit">件</text></text></u-col>
					</u-row>
					<u-row @click="toChecklist('lack')">
						<u-col span="6"><text>盘亏数</text></u-col>
						<u-col span="5" style="text-align: right;"><text class="number">-{{taskReport.LackNum}}<text class="unit">件</text></text></u-col>
					</u-row>
					<image class="img" src="../../static/images/icon_see1.svg"></image>
				</u-col>
				<view class="base-info-wrap">
					<view class="base-info-item">
						<view class="left text-ellipsis"><text>{{taskReport.Guid}}</text></view>
						<view class="right"><text>{{taskReport.FinishTime | dateFormat}}</text></view>
					</view>
					<view class="base-info-item">
						<view class="left"><text>{{taskReport.OrgName}}</text></view>
						<view class="right"><text>{{taskReport.CheckUserName}}</text></view>
					</view>
				</view>
			</u-row>
		</view>
		<view class="detail-card">
			<view class="card-tip"><text>实际盘点分布</text></view>
			<view class="pie">
				<canvas :canvas-id="pieCanvasId" :id="pieCanvasId" style="width: 100%;height: 300rpx;background-color: #FFF;"></canvas>
				<view class="legend-wrap">
					<view class="legend-item" v-for="(item, index) in taskReport.Items" :key="index">
						<view class="color" :style="`background-color: ${colors[index]};`"></view>
						<text class="name">{{item.TypeText}}:</text>
						<text class="total">{{item.RealNum}}</text>
					</view>
				</view>
			</view>
			<u-row class="category-wrap" v-for="(item, index) in taskReport.Items" :key="index" @click="toChecklist(item)" :style="index === 0 ? '' : ''">
				<u-col span="3"><u-image height="140rpx" width="100%" src="../../static/images/assets.svg"></u-image></u-col>
				<u-col span="7">
					<view class="title"><text>{{item.TypeText}}</text></view>
					<view style="margin-bottom: 10rpx;">
						<view class="c-item">
							<text>账面数</text>
							<text style="margin-left: 20rpx;color: #2A2A2A;font-family: Roboto-Regular, Roboto;">{{item.Num}}</text>
						</view>
						<view class="c-item">
							<text>实际数</text>
							<text style="margin-left: 20rpx;color: #2A2A2A;font-family: Roboto-Regular, Roboto;">{{item.RealNum}}</text>
						</view>
					</view>
					<view>
						<view class="c-item" v-show="item.IncreaseNum > 0">
							<text>盘盈数</text>
							<text style="margin-left: 20rpx;color: #31B027;font-family: Roboto-Regular, Roboto;">+{{item.IncreaseNum}}</text>
						</view>
						<view class="c-item" v-show="item.LackNum > 0">
							<text>盘亏数</text>
							<text style="margin-left: 20rpx;color: #E55D5D;font-family: Roboto-Regular, Roboto;">{{item.LackNum}}</text>
						</view>
					</view>
				</u-col>
				<u-col span="1" style="line-height: 160rpx;"><fa-icon name="icon-Right" size="30" color="#e4e4e4" /></u-col>
			</u-row>
		</view>
	</view>
</template>

<script>
	import FaIcon from '../../components/fa-icon/fa-icon.vue'
	import uCharts from '../../js_sdk/u-charts/u-charts/u-charts.js'
	import faNavbar from '../../components/fa-navbar/fa-navbar.vue'
	export default {
		components: {FaIcon, faNavbar},
		data() {
			return {
				chartData: {},
				pieCanvasId: "canvasPie",
				taskReport: "",
				cuOrgGuid:undefined,
				colors: ['#55D8C9', '#4172DE', '#6FE7FF', '#16EE98', '#E55D5D', '#FF81BD', '#EB8744', '#F2BB35', '#5EB2FF', '#8159FF', "#d101fd", "#b85503", "#5739a4", "#6c32ef", "#c074c5", "#41ef15", "#19a20f", "#6e3723", "#564bda", "#6bb376", "#087a10", "#f434ab", "#23c7c6", "#8c3483", "#6406f8", "#a69c6f", "#21476f", "#74be68", "#36cf4e", "#4b26e3", "#0df79e", "#210ac6", "#ad0843", "#267d7d", "#349473", "#039646", "#cc8f27", "#02c8f0", "#75b9de", "#6961f3", "#b84342", "#219b86", "#5d49fb", "#761a92", "#226ebc", "#0ee469", "#5ca356", "#d159a8", "#f97635", "#9c231c", "#af0287", "#2846de", "#4da137", "#6c4739", "#4ae91c", "#a4a909", "#7c16de", "#22d969", "#f035b0", "#3a3aa2", "#1780d9", "#773de7", "#039dd7", "#542285", "#a8a8c2", "#79933b", "#58476a", "#b20761", "#be5042", "#0842d8", "#1e03d3", "#3f4a82", "#3ce157", "#6d52e7", "#4d81dd", "#8ad64c", "#6f893b", "#540c4a", "#611acb", "#b341a8", "#3fdd80", "#4a4f4e", "#e24876", "#a85918", "#a28026", "#2a40cf", "#94c2ab", "#119f3b", "#b9323c", "#1641ab", "#7d6263", "#25ff79", "#31cc99", "#3732dd", "#e88a9d", "#f52830", "#3dcb2a", "#30f339", "#c7b93a", "#ba8b51", "#523db5", "#c42700", "#4f1b0f", "#6b3732", "#b07bba", "#d87093", "#af2b72", "#4481f3"],
			}
		},
		async onLoad(params) {
			let res = await this.$api.getCheckTaskDetail({"ID": params.reportId})
				.catch(err => uni.showModal({
					content: err.statusCode === 500 ? "服务器内部错误" : "网络错误",
					showCancel: false,
					complete: () => {
						let pages = getCurrentPages();
						if (pages[pages.length - 2].route === "pages/inventory/history") {
							uni.navigateBack();
						} else {
							uni.reLaunch({url: "../index/index"});
						}
					}
				}));
			if (res) {
				if (res.code === 999) {
					uni.showModal({
						content: res.message || "未知错误",
						showCancel: false,
						complete: () => {
							let pages = getCurrentPages();
							if (pages[pages.length - 2].route === "pages/inventory/history") {
								uni.navigateBack();
							} else {
								uni.reLaunch({url: "../index/index"})
							}
						}
					});
				} else {
					this.taskReport = res.data;
					this.cuOrgGuid = res.data.OrgGuid
					this.chartData.series = this.taskReport.Items.map(item => {
						return {
							"name": item.TypeText,
							"data": item.Num,
						}
					});
					// this.chartData.series =
					new uCharts({
						$this:this,
						canvasId: this.pieCanvasId,
						type: 'ring',
						fontSize:14,
						colors: this.colors,
						legend:{
						    show:false
						},
						title: {
							name: this.taskReport.RealNum,
							color: "#4374e0",
							fontSize: 15,
							offsetY:-10,
						},
						subtitle: {
							name: "总资产",
							color: "#a8a8a8",
							fontSize: 11
						},
						background:'#FFFFFF',
						pixelRatio:1,
						series: this.chartData.series,
						animation: false,
						width: uni.upx2px(600),
						height: uni.upx2px(300),
						disablePieStroke: true,
						dataLabel: false,
						padding: [0, 80, 0, 0],
						extra: {
							pie: {
							  ringWidth: 20,
							}
						},
					});
				}
			}
			
		},
		methods: {
			toChecklist(data) {
				let link = `/pages/report/checkList?taskID=${this.taskReport.Guid}&cuOrgGuid=${this.cuOrgGuid}`
				if (data == 'normal') {
					link = `${link}&list=normal`
				} else if (data == 'increase') {
					link = `${link}&list=increase`
				} else if (data == 'lack') {
					link = `${link}&list=lack`
				} else {
					if (data.IsHaveChild) {
						link = `/pages/report/subCategory?taskID=${this.taskReport.Guid}&type=${data.Type}&title=${data.TypeText}`
					} else {
						link = `${link}&type=${data.Type}`
					}
				}
				uni.navigateTo({
					url: link
				})
			},
			toPage(url) {
				uni.redirectTo({url: url});
			}
		},

	}
</script>

<style lang="scss" scoped>
	.numeric-info-wrap {
		background-color: #1e5fee;
		height: 400rpx;
		padding-top: 20rpx;
		.numeric-item {
			padding: 20rpx !important;
			font-size: 24rpx;
			position: relative;
			// background: linear-gradient(45deg, #43CD61 0%, #23D38E 100%);
			border-radius: 4px;
			height: 160rpx;
			.number {
				color: #000000;
				font-weight: bold;
				font-size: 40rpx;
				font-family: Roboto-Regular, Roboto;
				font-weight: 400;
				color: #FFFFFF;
			}
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			.unit {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
			}
		}
		.img {
			width: 40rpx;
			height: 40rpx;
			position: absolute;
			right: -10rpx;
			top: calc(50% - 20rpx);
		}
	}
	.base-info-wrap {
		width: 100%;
		padding: 40rpx;
		.base-info-item {
			height: 50rpx;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			.left {
				float: left;
				width: 50%;
			}
			.right {
				float: right;
				width: 50%;
				text-align: right;
			}
		}
	}
	.category-wrap {
		padding: 30rpx;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #4F5053;
		.u-col {
			width: 100%;
			height: 140rpx;
		}
		.title {
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #2A2A2A; 
			margin-bottom: 20rpx;
		}
		.c-item {
			display: inline-block;
			width: 50%;
		}
	}
	.detail-card {
		margin: -40rpx auto 40rpx;
		width: 90%;
		min-height: 62vh;
		background: #FFFFFF;
		box-shadow: 0px 4px 12px 0px rgba(61, 76, 98, 0.12);
		border-radius: 4px;
		.card-tip {
			font-size: 36rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #2A2A2A;
			padding: 30rpx;
		}
		.pie {
			position: relative;
			.legend-wrap {
				overflow-x: hidden;
				overflow-y: auto;
				position: absolute;
				width: 30%;
				height: 200rpx;
				top: 50rpx;
				right: 10%;
				/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
				  &::-webkit-scrollbar {  
				      width: 6rpx;  
				      height: 6rpx;  
				      background-color: #FFFFFF;  
				  }  
				  /*定义滚动条轨道 内阴影+圆角*/  
				  &::-webkit-scrollbar-track {  
				      border-radius: 6rpx;  
				      background-color: #F6F8FB;  
				  }
				  /*定义滑块 内阴影+圆角*/  
				  &::-webkit-scrollbar-thumb {  
				      border-radius: 6rpx;  
				      background-color: #cfcfcf; // 滚动条颜色
				  }  
				.legend-item {
					display: flex;
					flex-wrap: wrap;
					height: 40rpx;
					width: 100%;
					margin: 20rpx 0;
					.color {
						width: 20rpx;
						height: 20rpx;
						border-radius: 4rpx;
						line-height: 40rpx;
						margin-top: 10rpx;
						margin-right: 10rpx;
					}
					.name {
						width: 50%;
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #4F5053;
						line-height: 40rpx;
					}
					.total {
						width: 30%;
						font-size: 32rpx;
						font-family: Roboto-Bold, Roboto;
						font-weight: bold;
						color: #2A2A2A;
						line-height: 40rpx;
					}

				}
			}
		}
	}
</style>
